<template>
  <div class="div1">
    <div :id="echartsData.id" :style="{width: '100%', height: '80%',background:'#062339'}"></div>
    <div class="tips" :style="{width: '100%', height: '20px',display:'flex'}">
      <div class="lable"  v-for="(item,index) in echartsData.series" :key="index">{{item.name}}<div class="text" :style="'color:'+color[index]">———</div></div>
    </div>
  </div>
</template>

<script>

import * as echarts from 'echarts';
export default {
  name: "chartLinteffect",
  props: {
    echartsData: {
      type: Object,
      default: () => {
        return {
          id: '',
          xData:'',
          series:''
        }
      }
    },
  },
  data(){
    return{
      color: ['yellow', 'red', 'blue', 'blueviolet','green','white'],
      series:'',
    }
  },
  mounted (){
    console.log("echar",this.echartsData)
    this.initChart(this.echartsData.id,this.echartsData.xData,this.echartsData.series)

  },
  watch:{
        echartsData:{
            handler:function(val,oldVal){
                console.log("echarddd",this.echartsData)
                this.initChart(this.echartsData)
            },
            deep:true
        }
    },
  methods:{

    initChart(id,xData,series) {
      // series.prototype.color=['yellow','red'];
      let getchart = echarts.init(document.getElementById(id));
      this.series = series;
      var  option = {
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //     data: [name],
        //     bottom:'0%'
        // },
        grid: { //调整图表上下左右位置
          top:'10%',
          left: '3%',
          right: '8%',
          bottom: '11%',
          containLabel: true
        },

        xAxis: {
          type: 'value',
          // boundaryGap: [1,0],
          min: 0,
          max: 50,
          axisLabel:{color:'rgb(151,171,211)',fontSize:'10'},
          axisLine:{
            lineStyle:{color:'rgb(151,171,211)'}    // x轴坐标轴颜色
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle:{
              color: ['rgb(151,171,211)'],
              width: 1,
              type: 'solid'
            }
          },
          // boundaryGap: false,
          // data: xData
        },
        yAxis: {
          type: 'value',
          axisLabel:{color:'rgb(151,171,211)',fontSize:'10'},
          axisLine:{
            lineStyle:{color:'rgb(151,171,211)'}    // y轴坐标轴颜色
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle:{
              color: ['rgb(151,171,211)'],
              width: 1,
              type: 'solid'
            }
          },
          min: 0,
          max: 100,
          // data:[20,40,60,80,100],
        },
        color: this.color,
        series: series
      };

      getchart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        getchart.resize();
      });
    },

  }
}
</script>

<style scoped>
.div1{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  width: 100%;
}
.tips{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.lable{
  display: flex;
  color: white;
  width: 33%;
  height: 50%;
  font-size: 10px;
}
.text{
  margin-left: 5px;
}
</style>
